<template>
    <view class="page list-wrap">
        <view class="list_6 flex-col">
            <view class="list-items_6 flex-col" v-for="(item, index) in loopData0" :key="index"
                @click="handleToDetail(item)">
                <view class="group_42 flex-row">
                    <image class="image_29" referrerpolicy="no-referrer" :src="api_host + item.userAvatar" />
                    <view class="box_47 flex-col">
                        <view class="section_17 flex-row">
                            <text class="text_83">{{ item.nickName }}</text>
                            <image v-if="item.sex === '女'" class="thumbnail_49" referrerpolicy="no-referrer"
                                src="https://hxs.dsjhs.com:553/prod-api/profile/nv.png" />
                            <image v-if="item.sex === '男'" class="thumbnail_50" referrerpolicy="no-referrer"
                                src="https://hxs.dsjhs.com:553/prod-api/profile/nan.png" />
                        </view>
                        <view class="info flex-row">
                            <text class="text_84" v-if="item.year">{{ item.year + '岁' }}</text>
                            <text class="text_84" v-if="item.height">·{{ item.height + 'cm' }}</text>
                            <text class="text_84" v-if="item.weight">·{{ item.weight + 'kg' }}</text>
                            <text class="text_84" v-if="item.edu">·{{ item.edu }}</text>
                        </view>
                    </view>
                    <view class="text-wrapper_45 flex-col" @click.stop="handleChat(item)">
                        <text class="text_85">打招呼</text>
                    </view>
                </view>
                <view class="group_43 flex-row">
                    <view class="shiming flex-row" v-if="item.idCert === 2">
                        <image class="thumbnail_51" referrerpolicy="no-referrer"
                            src="https://hxs.dsjhs.com:553/prod-api/profile/sm.png" />
                        <text class="text_86">实名</text>
                    </view>
                    <view class="shiming flex-row" v-if="item.idCert === 3">
                        <image class="thumbnail_51" referrerpolicy="no-referrer"
                            src="https://hxs.dsjhs.com:553/prod-api/profile/gz-s.png" />
                        <text class="text_87">工作</text>
                    </view>
                </view>
                <view class="group_44 flex-row" v-if="item.tagObj && item.tagObj.length > 0">
                    <view class="text-wrapper_46 flex-row" v-for="tag in item.tagObj" :key="tag.id">
                        <text class="text_88">{{ tag.tagName }}</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 实名认证 -->
        <realname-modal :show="showRealnameModal" @close="showRealnameModal = false"
            @confirm="handleConfirm"></realname-modal>
    </view>
</template>

<script>
import {
    getMutualLikeList,
    checkRegister
} from '@/common/api_meethuangshi.js'
import serviceAgreement from './realnameauth/serviceAgreement.vue'


import realnameModal from './realnameModal.vue'
export default {
    components: {
        serviceAgreement,
        realnameModal
    },
    computed: {
        // 从 store 中获取当前用户信息
        currentUserInfo() {
            return this.$store.getters.currentUserInfo || {}
        }
    },
    data() {
        return {
            loopData0: [],
            currentUser: {},
            likeType: '',
            showRealnameModal: false,
        };
    },
    async onLoad(options) {
        // 从本地存储恢复 currentUserInfo 到 store
        try {
            const storedUserInfo = uni.getStorageSync('currentUserInfo')
            if (storedUserInfo) {
                this.$store.commit('setCurrentUserInfo', storedUserInfo)
            }
        } catch (e) {
            console.log('恢复用户信息失败:', e)
        }

        if (options && options.type) {
            this.likeType = options.type
        }
        this.currentUser = await this.ensureUserInfo();
        this.getUserLikeList()
        this.checkRegister()

    },
    methods: {
        async checkRegister() {
            const userId = await this.getUserId()
            if (!userId) {
                console.log('用户信息获取失败或用户未登录')
                return
            }
            console.log(this.userInfo, 'userInfo')
            const res = await checkRegister({
                userId: userId
            })
            if (res.code == 200) {
                // 存储到 store 中，计算属性会自动更新
                this.$store.commit('setCurrentUserInfo', res.data)
            }
        },
        handleChat(item) {
            console.log(this.currentUserInfo, 'currentUserInfo')
            if (this.currentUserInfo.idCert === 2) {
                uni.navigateTo({
                    url: `/subpage/meethuangshi/chat?id=${item.userId}&nickName=${item.nickName}&userAvatar=${item.userAvatar}`
                });
            } else {
                this.showRealnameModal = true
            }
        },
        handleToDetail(item) {
            uni.navigateTo({
                url: '/subpage/meethuangshi/personalHomepage?id=' + item.userId
            });
        },
        async getUserLikeList() {
            const res = await getMutualLikeList({
                userId: this.currentUser.id
            })
            if (res.code === 200) {
                this.loopData0 = res.data || []
            }
        },
        handleConfirm() {
            this.showRealnameModal = false
            uni.navigateTo({
                url: `/subpage/meethuangshi/acceptAuth?isUpdate=true`
            });
        }
    },
};
</script>

<style lang="scss" scoped>
.page {
    background-color: rgba(247, 246, 255, 1);
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;

    .box_44 {
        background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPng3f5fc270eff67fd1509f2db0fe7f7c67b86e4fc0c5310873c0edfad93ab18d58) 100% no-repeat;
        background-size: 100% 100%;
        padding: 18px 6px 22px 0;

        .group_37 {
            margin: 0 27px 0 43px;

            .text_77 {
                overflow-wrap: break-word;
                color: rgba(0, 0, 0, 1);
                font-size: 17px;
                font-family: SFPro-Semibold;
                font-weight: 600;
                text-align: right;
                white-space: nowrap;
                line-height: 22px;
            }

            .thumbnail_46 {
                width: 19px;
                height: 12px;
                margin: 5px 0 5px 182px;
            }

            .thumbnail_47 {
                width: 17px;
                height: 12px;
                margin: 5px 0 5px 8px;
            }

            .image_26 {
                width: 27px;
                height: 13px;
                margin: 5px 0 4px 7px;
            }
        }

        .group_38 {
            margin-top: 6px;

            .label_26 {
                width: 42px;
                height: 46px;
            }

            .text_78 {
                height: 24px;
                overflow-wrap: break-word;
                color: rgba(0, 0, 0, 1);
                font-size: 17px;
                font-family: SFProDisplay-Medium;
                font-weight: 500;
                text-align: right;
                white-space: nowrap;
                line-height: 20px;
                margin: 11px 0 0 120px;
            }

            .image_27 {
                width: 87px;
                height: 32px;
                margin: 7px 0 7px 67px;
            }
        }

        .group_39 {
            width: 100%;
            height: 400rpx;
            box-shadow: 0px 6px 20px 0px rgba(0, 102, 253, 0.1);
            padding-top: 20px;
            position: relative;
            margin: 0 10px 0 16px;
            background: url('https://hxs.dsjhs.com:553/prod-api/profile/dz-banner.png') no-repeat center;
            background-size: 100% 100%;

            // .block_7 {
            // 	box-shadow: 0px 5px 8px 0px rgba(123, 67, 194, 0.05);

            // 	.block_8 {
            // 		background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/d93030c3a00f41cd8b87fb63d5abb288_mergeImage.png);
            // 		border-radius: 20px;

            // 		.group_40 {
            // 			background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/07a8bd642e1f4d77b763ffd216a4dd7f_mergeImage.png);
            // 			border-radius: 20px;

            // 			.group_41 {
            // 				background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/ecca6d94df6748dba97371f6ad059247_mergeImage.png);
            // 				width: 391px;
            // 				height: 150px;
            // 				margin: 96px -17px -66px -16px;
            // 			}
            // 		}
            // 	}
            // }

            .block_9 {
                border-radius: 20px;
                background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/1e08a0440e794a089431df422a5278bd_mergeImage.png);
                height: 200px;
                width: 358px;
                position: absolute;
                left: 0;
                top: 0;
                padding: 32px 126px 10px 14px;

                .section_15 {
                    width: 218px;

                    .text-wrapper_42 {
                        background-color: rgba(255, 222, 109, 1);
                        border-radius: 8px;
                        padding: 5px 6px 5px 7px;

                        .text_79 {
                            background-image: linear-gradient(180deg,
                                    rgba(34, 22, 51, 1) 0,
                                    rgba(215, 158, 255, 1) 100%);
                            overflow-wrap: break-word;
                            color: rgba(52, 49, 79, 1);
                            font-size: 14px;
                            letter-spacing: -0.9333333373069763px;
                            font-family: DingTalk-JinBuTi;
                            font-weight: normal;
                            text-align: left;
                            white-space: nowrap;
                            line-height: 16px;
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                        }
                    }

                    .label_27 {
                        width: 23px;
                        height: 23px;
                        margin-bottom: 3px;
                    }
                }

                .text-wrapper_43 {
                    width: 122px;
                    margin: 16px 91px 0 5px;

                    .text_80 {
                        overflow-wrap: break-word;
                        color: rgba(52, 49, 79, 1);
                        font-size: 14px;
                        letter-spacing: -0.9333333373069763px;
                        font-family: DingTalk-JinBuTi;
                        font-weight: normal;
                        text-align: left;
                        white-space: nowrap;
                        line-height: 16px;
                        margin-top: 14px;
                    }

                    .text_81 {
                        overflow-wrap: break-word;
                        color: rgba(52, 49, 79, 1);
                        font-size: 26px;
                        letter-spacing: -1.7333333492279053px;
                        font-family: DingTalk-JinBuTi;
                        font-weight: normal;
                        text-align: left;
                        white-space: nowrap;
                        line-height: 31px;
                    }
                }

                .section_16 {
                    margin: 0 99px 0 7px;

                    .image-text_36 {
                        width: 112px;

                        .image_28 {
                            width: 32px;
                            height: 7px;
                            margin: 12px 0 12px 0;
                        }

                        .text-group_12 {
                            overflow-wrap: break-word;
                            color: rgba(52, 49, 79, 1);
                            font-size: 26px;
                            letter-spacing: -1.7333333492279053px;
                            font-family: DingTalk-JinBuTi;
                            font-weight: normal;
                            text-align: left;
                            white-space: nowrap;
                            line-height: 31px;
                        }
                    }
                }

                .image-wrapper_11 {
                    margin: 2px 94px 0 101px;

                    .label_28 {
                        width: 23px;
                        height: 23px;
                    }
                }

                .text-wrapper_44 {
                    margin: 13px 124px 0 5px;

                    .text_82 {
                        overflow-wrap: break-word;
                        color: rgba(114, 155, 255, 1);
                        font-size: 11px;
                        letter-spacing: 3.6666667461395264px;
                        font-weight: normal;
                        text-align: left;
                        white-space: nowrap;
                        line-height: 16px;
                    }
                }
            }
        }
    }

    .box_45 {
        padding: 2px 16px 0 16px;

        .box_46 {
            margin-left: 6px;

            .box_5 {
                width: 40px;
                height: 40px;
                background: url('https://hxs.dsjhs.com:553/prod-api/profile/dz.png') no-repeat center;
                background-size: 100% 100%;
            }

            .box_6 {

                width: 40px;
                height: 40px;
                background: url('https://hxs.dsjhs.com:553/prod-api/profile/hd.png') no-repeat center;
                background-size: 100% 100%;
            }
        }

        .text-wrapper_4 {

            margin: 11px 0 9px 0;

            .text_7 {
                height: 21px;
                overflow-wrap: break-word;
                color: rgba(52, 49, 79, 0.3);
                font-size: 18px;
                font-family: DingTalk-JinBuTi;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 21px;
                margin: -1px 6px 0 2px;
            }
        }

        .image-text_37 {
            width: 96px;
            margin-left: 27px;

            .group_5 {
                background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/d90d4f9c783c40e7bac441d7124ac592_mergeImage.png);
                width: 40px;
                height: 40px;
            }

            .text-group_2 {
                overflow-wrap: break-word;
                color: rgba(52, 49, 79, 1);
                font-size: 18px;
                font-family: DingTalk-JinBuTi;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 21px;
                margin-top: 10px;
            }
        }

        .image-text_38 {
            width: 48px;
            margin: 9px 0 11px 50px;

            .thumbnail_48 {
                width: 16px;
                height: 16px;
                margin: 2px 0 2px 0;
            }

            .text-group_3 {
                overflow-wrap: break-word;
                color: rgba(52, 49, 79, 1);
                font-size: 14px;
                font-weight: normal;
                text-align: right;
                white-space: nowrap;
                line-height: 20px;
            }
        }
    }

    .list_6 {
        width: 100%;
        padding: 16px;
        box-sizing: border-box;

        .list-items_6 {
            background-color: rgba(255, 255, 255, 1);
            border-radius: 40px 20px 20px 20px;
            height: 132px;
            margin-bottom: 12px;
            width: 100%;
            padding: 12px 12px 16px 12px;
            box-sizing: border-box;

            .group_42 {
                width: 334px;
                height: 56px;

                .image_29 {
                    width: 56px;
                    height: 56px;
                    border-radius: 50%;
                }

                .box_47 {
                    width: 149px;
                    height: 46px;
                    margin: 6px 0 4px 16px;

                    .section_17 {
                        width: 118px;
                        height: 22px;
                        margin-right: 31px;

                        .text_83 {
                            overflow-wrap: break-word;
                            color: rgba(52, 49, 79, 1);
                            font-size: 16px;
                            font-family: PingFangSC-Medium;
                            font-weight: 500;
                            text-align: left;
                            white-space: nowrap;
                            line-height: 22px;
                        }

                        .thumbnail_49 {
                            width: 16px;
                            height: 16px;
                            margin: 3px 0 3px 5px;
                        }

                        .thumbnail_50 {
                            width: 16px;
                            height: 16px;
                            margin: 3px 0 3px 6px;
                        }
                    }

                    .text_84 {
                        overflow-wrap: break-word;
                        color: rgba(52, 49, 79, 1);
                        font-size: 14px;
                        font-weight: normal;
                        text-align: left;
                        white-space: nowrap;
                        line-height: 20px;
                        margin-top: 4px;
                    }
                }

                .text-wrapper_45 {
                    background: linear-gradient(173deg, #FFA5F5 0%, #319EFF 100%);
                    margin: 0 0 26px 58px;
                    padding: 6px 8px 6px 8px;
					border-radius: 10px;

                    .text_85 {
                        overflow-wrap: break-word;
                        color: rgba(255, 255, 255, 1);
                        font-size: 13px;
                        font-family: PingFangSC-Medium;
                        font-weight: 500;
                        text-align: left;
                        white-space: nowrap;
                        line-height: 18px;
                    }
                }
            }

            .block_21 {
                background-color: rgba(255, 255, 255, 1);
                border-radius: 20px;
                width: 358px;
                align-self: center;
                margin-top: -1px;
                padding: 0 0 12px 16px;

                .block_22 {
                    width: 342px;

                    .image-text_154 {
                        width: 282px;
                        margin-top: 14px;

                        .section_33 {
                            background-color: rgba(233, 230, 255, 1);
                            border-radius: 4px;
                            position: relative;
                            margin: 1px 0 1px 0;
                            padding: 2px 5px 2px 2px;

                            .image-text_155 {
                                width: 43px;

                                .thumbnail_106 {
                                    width: 16px;
                                    height: 16px;
                                }

                                .text-group_104 {
                                    overflow-wrap: break-word;
                                    color: rgba(108, 96, 213, 1);
                                    font-size: 12px;
                                    font-family: PingFangSC-Medium;
                                    font-weight: 500;
                                    text-align: left;
                                    white-space: nowrap;
                                    line-height: 16px;
                                }
                            }

                            .image-text_156 {
                                position: absolute;
                                left: 2px;
                                top: 2px;
                                width: 43px;
                                height: 16px;

                                .thumbnail_106 {
                                    width: 16px;
                                    height: 16px;
                                }

                                .text-group_104 {
                                    overflow-wrap: break-word;
                                    color: rgba(108, 96, 213, 1);
                                    font-size: 12px;
                                    font-family: PingFangSC-Medium;
                                    font-weight: 500;
                                    text-align: left;
                                    white-space: nowrap;
                                    line-height: 16px;
                                }
                            }
                        }

                        .text-group_105 {
                            overflow-wrap: break-word;
                            color: rgba(52, 49, 79, 1);
                            font-size: 16px;
                            font-family: PingFangSC-Medium;
                            font-weight: 500;
                            text-align: left;
                            white-space: nowrap;
                            line-height: 22px;
                        }
                    }

                    .text-wrapper_113 {
                        background-color: rgba(74, 199, 125, 1);
                        margin-bottom: 8px;
                        padding: 2px 12px 9px 10px;

                        .text_224 {
                            overflow-wrap: break-word;
                            color: rgba(255, 255, 255, 1);
                            font-size: 12px;
                            font-family: PingFangSC-Medium;
                            font-weight: 500;
                            text-align: right;
                            white-space: nowrap;
                            line-height: 17px;
                        }
                    }
                }

                .block_23 {
                    width: 165px;
                    margin: 8px 177px 0 0;

                    .text-wrapper_114 {
                        background-color: rgba(52, 49, 79, 0.06);
                        border-radius: 14px;
                        padding: 2px 8px 2px 8px;

                        .text_225 {
                            overflow-wrap: break-word;
                            color: rgba(52, 49, 79, 1);
                            font-size: 12px;
                            font-weight: normal;
                            text-align: left;
                            white-space: nowrap;
                            line-height: 16px;
                        }
                    }

                    .text-wrapper_115 {
                        background-color: rgba(52, 49, 79, 0.06);
                        border-radius: 14px;
                        padding: 2px 8px 2px 8px;

                        .text_226 {
                            overflow-wrap: break-word;
                            color: rgba(52, 49, 79, 1);
                            font-size: 12px;
                            font-weight: normal;
                            text-align: left;
                            white-space: nowrap;
                            line-height: 16px;
                        }
                    }

                    .text-wrapper_116 {
                        background-color: rgba(52, 49, 79, 0.06);
                        border-radius: 14px;
                        padding: 2px 8px 2px 8px;

                        .text_227 {
                            overflow-wrap: break-word;
                            color: rgba(52, 49, 79, 1);
                            font-size: 12px;
                            font-weight: normal;
                            text-align: left;
                            white-space: nowrap;
                            line-height: 16px;
                        }
                    }
                }

                .block_24 {
                    position: relative;
                    margin: 12px 105px 0 0;

                    .image-text_157 {
                        width: 237px;

                        .thumbnail_107 {
                            width: 16px;
                            height: 16px;
                            margin-top: 44px;
                        }

                        .text-group_106 {
                            .text_228 {
                                overflow-wrap: break-word;
                                color: rgba(52, 49, 79, 1);
                                font-size: 12px;
                                font-weight: normal;
                                text-align: left;
                                white-space: nowrap;
                                line-height: 16px;
                            }

                            .text_229 {
                                overflow-wrap: break-word;
                                color: rgba(52, 49, 79, 1);
                                font-size: 12px;
                                font-weight: normal;
                                text-align: left;
                                white-space: nowrap;
                                line-height: 16px;
                                margin: 6px 68px 0 0;
                            }

                            .text_230 {
                                overflow-wrap: break-word;
                                color: rgba(52, 49, 79, 1);
                                font-size: 12px;
                                font-weight: normal;
                                text-align: left;
                                white-space: nowrap;
                                line-height: 16px;
                                margin: 6px 155px 0 0;
                            }
                        }
                    }

                    .image-text_158 {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 237px;
                        height: 60px;

                        .thumbnail_108 {
                            width: 16px;
                            height: 16px;
                            margin-bottom: 44px;
                        }

                        .text-group_107 {
                            .text_228 {
                                overflow-wrap: break-word;
                                color: rgba(52, 49, 79, 1);
                                font-size: 12px;
                                font-weight: normal;
                                text-align: left;
                                white-space: nowrap;
                                line-height: 16px;
                            }

                            .text_229 {
                                overflow-wrap: break-word;
                                color: rgba(52, 49, 79, 1);
                                font-size: 12px;
                                font-weight: normal;
                                text-align: left;
                                white-space: nowrap;
                                line-height: 16px;
                                margin: 6px 68px 0 0;
                            }

                            .text_230 {
                                overflow-wrap: break-word;
                                color: rgba(52, 49, 79, 1);
                                font-size: 12px;
                                font-weight: normal;
                                text-align: left;
                                white-space: nowrap;
                                line-height: 16px;
                                margin: 6px 155px 0 0;
                            }
                        }
                    }

                    .image-text_159 {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 237px;
                        height: 60px;

                        .thumbnail_109 {
                            width: 16px;
                            height: 16px;
                            margin: 22px 0 22px 0;
                        }

                        .text-group_108 {
                            .text_228 {
                                overflow-wrap: break-word;
                                color: rgba(52, 49, 79, 1);
                                font-size: 12px;
                                font-weight: normal;
                                text-align: left;
                                white-space: nowrap;
                                line-height: 16px;
                            }

                            .text_229 {
                                overflow-wrap: break-word;
                                color: rgba(52, 49, 79, 1);
                                font-size: 12px;
                                font-weight: normal;
                                text-align: left;
                                white-space: nowrap;
                                line-height: 16px;
                                margin: 6px 68px 0 0;
                            }

                            .text_230 {
                                overflow-wrap: break-word;
                                color: rgba(52, 49, 79, 1);
                                font-size: 12px;
                                font-weight: normal;
                                text-align: left;
                                white-space: nowrap;
                                line-height: 16px;
                                margin: 6px 155px 0 0;
                            }
                        }
                    }
                }

                .block_25 {
                    background-color: rgba(52, 49, 79, 0.08);
                    width: 342px;
                    height: 1px;
                    margin-top: 8px;
                }

                .block_26 {
                    margin: 12px 12px 0 0;

                    .image_46 {
                        width: 84px;
                        height: 24px;
                        margin: 3px 0 3px 0;
                    }

                    .text_231 {
                        overflow-wrap: break-word;
                        color: rgba(52, 49, 79, 1);
                        font-size: 12px;
                        font-weight: normal;
                        text-align: left;
                        white-space: nowrap;
                        line-height: 16px;
                        margin: 7px 0 0 6px;
                    }

                    .text-wrapper_117 {
                        background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPngf6657155fe8d8d7c00f77202105868097778a155ba4f416e36700913fb4818cf) 100% no-repeat;
                        background-size: 100% 100%;
                        margin-left: 95px;
                        padding: 6px 16px 6px 16px;

                        .text_232 {
                            overflow-wrap: break-word;
                            color: rgba(255, 255, 255, 1);
                            font-size: 13px;
                            font-family: PingFangSC-Medium;
                            font-weight: 500;
                            text-align: right;
                            white-space: nowrap;
                            line-height: 18px;
                        }
                    }
                }

                .text_233 {
                    overflow-wrap: break-word;
                    color: rgba(52, 49, 79, 1);
                    font-size: 12px;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 16px;
                    margin: 9px 222px 0 0;
                }
            }

            .group_43 {
                margin: 0 162px 0 72px;

                .thumbnail_51 {
                    width: 16px;
                    height: 16px;
                }

                .text_86 {
                    overflow-wrap: break-word;
                    color: rgba(52, 49, 79, 1);
                    font-size: 12px;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 16px;
                    margin-left: 4px;
                }

                .thumbnail_52 {
                    width: 16px;
                    height: 16px;
                    margin-left: 12px;
                }

                .text_87 {
                    overflow-wrap: break-word;
                    color: rgba(52, 49, 79, 1);
                    font-size: 12px;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 16px;
                    margin-left: 4px;
                }
            }

            .group_44 {
                position: relative;
                width: 192px;
                height: 20px;
                margin: 12px 70px 0 72px;
                gap: 8px;

                .text-wrapper_46 {
                    background-color: rgba(52, 49, 79, 0.06);
                    border-radius: 14px;
                    padding: 2px 8px 2px 8px;
                    gap: 8px;

                    .text_88 {
                        overflow-wrap: break-word;
                        color: rgba(52, 49, 79, 1);
                        font-size: 12px;
                        font-weight: normal;
                        text-align: left;
                        white-space: nowrap;
                        line-height: 16px;
                    }
                }

                .text-wrapper_47 {
                    background-color: rgba(52, 49, 79, 0.06);
                    border-radius: 14px;
                    position: absolute;
                    left: 46px;
                    top: 0;
                    padding: 2px 8px 2px 8px;

                    .text_89 {
                        overflow-wrap: break-word;
                        color: rgba(52, 49, 79, 1);
                        font-size: 12px;
                        font-weight: normal;
                        text-align: left;
                        white-space: nowrap;
                        line-height: 16px;
                    }
                }

                .text-wrapper_48 {
                    background-color: rgba(52, 49, 79, 0.06);
                    border-radius: 14px;
                    margin-left: 6px;
                    padding: 2px 8px 2px 8px;

                    .text_90 {
                        width: 36px;
                        overflow-wrap: break-word;
                        color: rgba(52, 49, 79, 1);
                        font-size: 12px;
                        font-weight: normal;
                        text-align: left;
                        white-space: nowrap;
                        line-height: 16px;
                    }
                }

                .text-wrapper_49 {
                    background-color: rgba(52, 49, 79, 0.06);
                    border-radius: 14px;
                    margin-left: 6px;
                    padding: 2px 8px 2px 8px;

                    .text_91 {
                        overflow-wrap: break-word;
                        color: rgba(52, 49, 79, 1);
                        font-size: 12px;
                        font-weight: normal;
                        text-align: left;
                        white-space: nowrap;
                        line-height: 16px;
                    }
                }
            }
        }
    }
}

.group_10 {
    position: fixed;
    bottom: 13px;
    left: 10px;
    width: 370px;
    background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPng93d9a53f9848b53c2e0013c6bdf97706af7068fcc0fd96707453961573bbb398) 100% no-repeat;
    background-size: 100% 100%;
    align-self: center;
    margin-top: -1px;
    justify-content: flex-center;
    padding: 4px 17px 19px 17px;

    .image-text_39 {
        margin-top: 16px;

        .label_29 {
            width: 22px;
            height: 21px;
        }

        .text-group_4 {
            overflow-wrap: break-word;
            color: rgba(52, 49, 79, 1);
            font-size: 10px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            text-align: left;
            white-space: nowrap;
            line-height: 18px;
            align-self: center;
            margin-top: 1px;
        }
    }

    .image-text_40 {
        margin: 18px 0 2px 55px;

        .thumbnail_53 {
            width: 18px;
            height: 17px;
            align-self: center;
        }

        .text-group_5 {
            overflow-wrap: break-word;
            color: rgba(11, 15, 18, 1);
            font-size: 10px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            text-align: right;
            white-space: nowrap;
            line-height: 14px;
            margin-top: 5px;
        }
    }

    .group_11 {
        background-color: rgba(254, 244, 232, 1);
        border-radius: 50%;
        margin: 0 0 4px 45px;
        padding: 5px 5px 5px 5px;

        .box_48 {
            background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/4db0aa7135a54187b88327ecb9f87214_mergeImage.png);
            width: 42px;
            height: 42px;
        }
    }

    .image-text_41 {
        margin: 17px 0 2px 44px;

        .thumbnail_54 {
            width: 20px;
            height: 19px;
        }

        .text-group_6 {
            overflow-wrap: break-word;
            color: rgba(11, 15, 18, 1);
            font-size: 10px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            text-align: right;
            white-space: nowrap;
            line-height: 14px;
            margin-top: 4px;
        }
    }

    .image-text_42 {
        margin: 14px 0 2px 54px;

        .label_30 {
            width: 24px;
            height: 24px;
        }

        .text-group_7 {
            overflow-wrap: break-word;
            color: rgba(11, 15, 18, 1);
            font-size: 10px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            text-align: right;
            white-space: nowrap;
            line-height: 14px;
            align-self: center;
            margin-top: 2px;
        }
    }
}

.image-wrapper_12 {
    padding: 0 80px 9px 80px;

    .image_30 {
        width: 230px;
        height: 5px;
    }
}

.tab-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-right: 27px;

}

.tabbar {
    position: fixed;
    bottom: 40rpx;
    left: 0;
    width: 100%;
    z-index: 9999;

    .tabbar-box {
        padding: 10rpx 0 30rpx 0;
        margin-left: 20rpx;
        margin-right: 20rpx;
        border-radius: 30rpx;

        .center-img {
            margin-top: -70rpx;
            border: 3px solid #fff;
            border-radius: 50%;
        }
    }
}

.active-tab {
    font-weight: bold;

    .text-wrapper_4 {
        background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPng35a3e4cfdf38065af129e4fa0bc88a7b3ce52afcad872ec8a0cbefe6ae9f0806) 100% no-repeat;
        background-size: 100% 100%;
    }

    .image-text_37 {

        .text-group_2 {
            background: url(https://lanhu-oss-proxy.lanhuapp.com/SketchPng35a3e4cfdf38065af129e4fa0bc88a7b3ce52afcad872ec8a0cbefe6ae9f0806) 100% no-repeat;
            background-size: 100% 100%;
        }

    }

    .text_7 {
        color: rgba(52, 49, 79, 1) !important;
    }
}
</style>